import React, { Key, useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { TableProps } from '_antd@4.24.12@antd/es/table';
import { Card, Input, PageHeader, Row, Select, Table, Tag, Typography } from 'antd';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { connect, useDispatch, Link } from 'umi';
import { Button } from '_antd@4.24.12@antd';

const { Option } = Select;
const { TextArea } = Input;
const { Paragraph } = Typography;//说明文字的标签
export type TableListItem = {
  advisorNumber: string;
  dormitoryRoom: string;
  instructorNumber: string;
  key: number;
  stuName: string;
  stuCode: string;
  majorLabel: string;
  classLabel: string;
  phoneNumber: string;
  gender: string;
  politicalParty: string;
  collegeEntranceScore: number;
};
const columns: ProColumns<TableListItem>[] = [
  {
    title: <b>姓名</b>,
    width: 200,
    align: 'center',
    dataIndex: 'stuName',
    fixed:'left',
    render: (text, record) => {
      return <Link to={"/StudentMessage/StudentInfoDetail?stuCode=" + record.stuCode}>{text}</Link>
    }
  },
  {
    title: <b>学号</b>,
    width: 200,
    align: 'center',
    dataIndex: 'stuCode',
    fixed:'left',
  },
  {
    title: <b>性别</b>,
    width: 200,
    align: 'center',
    dataIndex: 'gender',
  },
  {
    title: <b>民族</b>,
    width: 200,
    align: 'center',
    dataIndex: 'ethnicity',
  },
  {
    title: <b>籍贯</b>,
    width: 200,
    align: 'center',
    dataIndex: 'hometown',
  },
  {
    title: <b>出生年月</b>,
    width: 200,
    align: 'center',
    dataIndex: 'birth',
  },
  {
    title: <b>身份证号</b>,
    width: 200,
    align: 'center',
    dataIndex: 'idCard',
  },
  {
    title: <b>专业</b>,
    width: 200,
    align: 'center',
    dataIndex: 'majorLabel',
  },
  {
    title: <b>班级</b>,
    align: 'center',
    width: 200,
    dataIndex: 'classLabel',
  },
  {
    title: <b>校区</b>,
    align: 'center',
    width: 200,
    dataIndex: 'dormitoryCampus',
  },
  {
    title: <b>宿舍</b>,
    align: 'center',
    width: 200,
    dataIndex: 'dormitoryBuilding',
    dataIndex1: 'dormitoryRoom',
    render:(text,record)=>{
      const newData = text+'  '+record.dormitoryRoom;
      return newData;
    }
  },
  {
    title: <b>政治面貌</b>,
    align: 'center',
    width: 200,
    dataIndex: 'politicalParty',
  },
  {
    title: <b>高考分数</b>,
    align: 'center',
    width: 200,
    dataIndex: 'collegeEntranceScore',
  },
  {
    title: <b>生源地</b>,
    align: 'center',
    width: 200,
    dataIndex: 'originPlace',
  },
  {
    title: <b>电话</b>,
    align: 'center',
    width: 200,
    dataIndex: 'phoneNumber',
  },
  {
    title: <b>邮箱</b>,
    align: 'center',
    width: 200,
    dataIndex: 'email',
  },
  {
    title: <b>辅导员</b>,
    align: 'center',
    width: 200,
    dataIndex: 'instructorName',
    dataIndex1: 'instructorNumber',
    render:(text,record)=>{
      const newData = text+'  '+record.instructorNumber;
      return newData;
    }
  },
  {
    title: <b>班导师</b>,
    align: 'center',
    width: 200,
    dataIndex: 'classAdvisor',
    dataIndex1: 'advisorNumber',
    render:(text,record)=>{
      const newData = text+'  '+record.advisorNumber;
      return newData;
    }
  },
  {
    title: <b>爱好</b>,
    align: 'center',
    width: 200,
    dataIndex: 'hobbies',
  },
  {
    title: <b>特长（获得奖项等）</b>,
    align: 'center',
    width: 200,
    dataIndex: 'advantages',
  },
];
function StudentMessage() {
  // 存储用户选择的行的keys
  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([]);
  // 存储学生列表
  const [tableListData, setTableListData] = useState<TableListItem[]>([]);
  const dispatch = useDispatch();
  useEffect(() => {
    //获取数据接口
    dispatch({
      type: 'Model_createclusterModel/getstudentListEffects',
      payload: {
        // code: JSON.parse(props.user.currrentuser).account,
        code: localStorage.getItem('userAccount'),
        callback: (value: any) => {
          // console.log(value);
          setTableListData(value);
        },
      },
    });
  }, []);
  const [modalVisible, setModalVisible] = useState(false);//控制 Modal 的显示与隐藏：
  //说明文字标签定义
  const content = (
    <>
      <Paragraph>
        河北工业大学电气工程学院举办系列活动具有重要意义。这些活动展示学院实力，拓宽学生知识面，培养实践能力，加强团队合作，并与专家、企业交流。活动提供实践锻炼，促进学术水平提高，培养学生综合素质，推动学院与业界合作。
      </Paragraph>
      <Paragraph>
        这些活动为电气工程学院提供了一个展示学院实力和学生才华的窗口。通过举办各类学术讲座、科技竞赛、创新创业活动等，学院能够吸引更多的人关注学院的教学质量和实践能力，提升学院的知名度和声誉。
      </Paragraph>
      <Paragraph>
        这些活动为学生提供了一个实践和锻炼的平台。通过参与活动，学生可以将在课堂上学到的知识应用到实际情境中，培养解决问题和创新思维的能力。
      </Paragraph>
    </>
  );
  //学生图像标签定义
  const Content = ({ children, extraContent, onNewActivityClick }: any) => (
    <Row>
      <div style={{ flex: 1 }}>{children}</div>

      <div style={{ marginRight: 10, marginTop: 3 }}><span style={{ fontSize: 18 }}></span></div>
      <div className="image">
        {extraContent}
      </div>
    </Row>
  );

  const handleNewActivityClick = () => {
    setModalVisible(true);
  };
  const handleModalOk = () => {
    // 处理表单提交逻辑
    // ...
    setModalVisible(false);
  };
  const handleModalCancel = () => {
    setModalVisible(false);
  };
  return (
    <PageContainer>
      <Card style={{ marginBottom: 24 }}>
        <PageHeader
          title="学生信息"
          subTitle="学生基本信息和学生家庭信息"
          tags={<Tag color="blue">运行中</Tag>}
        >
          <Content onNewActivityClick={handleNewActivityClick}>
            {content}
          </Content>
        </PageHeader>
      </Card>
      <div>
        <ProTable<TableListItem>
          columns={columns}
          //配置表格的行选择功能。
          rowSelection={{
            selectedRowKeys, // 设置用户选择的行
            onChange: (keys) => setSelectedRowKeys(keys), // 更新用户选择的行
            selections: [
              Table.SELECTION_ALL, //全选
              Table.SELECTION_INVERT, //反选
              Table.SELECTION_NONE, //全不选
            ],
          }}
          dataSource={tableListData}
          scroll={{ x: 1300 }} 
          options={false}
          search={false}
          pagination={{ pageSize: 10 }}
          rowKey="key"
          headerTitle="学生列表"
        />
      </div>
    </PageContainer>
  )
}

export default connect(({ Model_createclusterModel }: any) => ({
  Model_createclusterModel,
}))(StudentMessage);
